<template>
  <div id="app" class="weaving-check">
    <van-scanner ref="vanScannerRef" scan-text="请扫布样盘头码" @scanned="processScanResultFn"></van-scanner>
    <van-popup v-model="craft.show" style="display: flex;flex-flow:column;align-items: center;width: 60vw;height: 90vh;padding:2vh 2vw" :closeable="true" @opened="startScanFn" @close="stopScanFn" @closed="$emit('close')">
      <div tabindex="0" ref="weavingCheckDivRef" v-if="craft.id > 0" style="display: flex;flex-flow: column;align-items: center;">
        <div style="padding-bottom: 3vh;">
          <span style="font-size: 2rem;">品名: {{ craft.designNo }}</span>
        </div>
        <div style="padding-bottom: 3vh;">
          <span style="font-size: 2rem;">颜色: {{ craft.colorNo }}</span>
        </div>
        <div style="padding-bottom: 3vh;">
          <span style="font-size: 2rem;">织机号: {{ craft.colorNo }}</span>
        </div>
        <div style="padding-bottom: 3vh;">
          <van-image :src="craft.samplePic" width="35vw" height="45vh" @click="preView.show = true">
          </van-image>
          <van-image-preview v-model="preView.show" :images="preView.urls" :closeable="true"></van-image-preview>
        </div>
        <div>
          <van-button type="primary" @click="confirmReceiveSampleFn">确认接收</van-button>
        </div>
      </div>
      <div tabindex="0" ref="weavingCheckDivRef" v-if="craft.id == 0" style="display: flex;height: 80vh;align-items: center;justify-content: center;">
        <van-button style="font-size: 3rem;width: 30vw; height: 20vh;" type="danger" @click="startScanFn">请扫码盘头码...</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {SPLIT_BLANK, SPLIT_QUESTION} from "@/utils/enum";
import {loadCraftById} from "@/views/process/main";
import VanScanner from "@/components/van-scanner";
import {genUploadToken} from "@/utils/common";
import {exportBaseUrl} from "@/utils/request";
import {confirmReceiveSample} from "@/views/weaving-check/weaving-check";

export default {
  name: "weavingCheck",
  components: {VanScanner},
  props: {
    showWeavingCheck: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      SPLIT_QUESTION,

      /* 盘头 */
      craft: {
        show: false,
        id: 0,
        designId: 0,
        designNo: SPLIT_BLANK,
        colorNo: SPLIT_BLANK,
        craftNo: SPLIT_BLANK,
        loomNo: SPLIT_BLANK,
        samplePic: SPLIT_BLANK,
      },

      /* 扫码组件 */
      scanner: null,

      /* 图片预览 */
      preView: {
        show: false,
        urls: [],
      },
    }
  },
  mounted() {
    const that = this;
    that.initFn();
  },
  methods: {
    /* 初始化 */
    initFn() {
      const that = this;
      that.craft.show = true;
    },

    /* 开始扫码 */
    startScanFn() {
      const that = this;
      that.$refs.vanScannerRef.startScanFn();
    },
    /* 停止扫码 */
    stopScanFn() {
      const that = this;
      that.$refs.vanScannerRef.stopScanFn();
    },

    /* 扫码处理 */
    processScanResultFn(scanParam) {
      const that = this;
      that.$nextTick(() => {
        that.$refs.weavingCheckDivRef.focus();
      });
      that.stopScanFn();
      if(scanParam.indexOf("99,") === 0) {      //批次码:16,ID   加载投料单数据
        loadCraftById(scanParam.substr(3) + SPLIT_QUESTION + "designFlag=true", data => {
          that.craft.id = data.id;
          that.craft.designId = data.designFormId;
          that.craft.designNo = data.designNo;
          that.craft.colorNo = data.colorNo;
          that.craft.craftNo = data.craftNo;
          that.craft.loomNo = data.loomNo;
          if(data.samplePic && data.samplePic != SPLIT_BLANK) {
            genUploadToken({
              type: "YPSJD"
            }, tokenRes => {
              that.preView.urls.splice(0, that.preView.urls.length);
              that.craft.samplePic = exportBaseUrl("res") + "/res/" + data.samplePic + '?accessToken=' + tokenRes.accessToken;
              that.preView.urls.push(that.craft.samplePic);
            });
          }
        });
      } else {
        that.$toast.fail("不是盘头码");
      }
    },

    /* 确认接收 */
    confirmReceiveSampleFn() {
      const that = this;
      confirmReceiveSample({
        craftId: that.craft.id
      }, data => {
        that.$toast.success({
          message: "确认接收成功",
          onClose: () => {
            that.craft.id = 0;
            that.startScanFn();
          }
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.weaving-check {
}
</style>